<template>
  <div>
    <KunkkaTableTransfer
      ref="KunkkaTableTransfer"
      :name="name"
      :table-data="tableData"    
      :left-props="leftProps"
      :right-props="rightProps"
      filter-field="name"
      @dispatchData="getArr"
   
    />
    <div class="markdown-body">
      <readme />
    </div>
  </div>
</template>

<script>
import Readme from './readme.md';
export default {
  components: { Readme },
  data() {
    return {
      name:'KunkkaTableTransfer',
      tableData: Array.from({ length: 500 }, (_, idx) => ({
        id: idx,
        date: '2021-01-01',
        name: 'name' + idx
      })),
      leftProps: [
        { label: 'id', prop: 'id' },
        { label: 'date', prop: 'date' },
        { label: 'name', prop: 'name' }
      ],
      rightProps: [
        { label: 'id', prop: 'id' },
        { label: 'date', prop: 'date' },
        { label: 'name', prop: 'name' }
      ]
    };
  },
  mounted() {
    var arr = Array.from({ length: 5 }, (_, idx) => ({
      id: idx,
      date: '2021-01-01',
      name: 'name' + idx
    }))
    this.$refs.KunkkaTableTransfer.setPickArray(arr)
 
  },
  methods: {
    getArr(arr) {
      console.log(arr)
    }
  }
};
</script>

<style></style>
